<!-- 评论区 -->
{% if (article and article.allow_comment) or (custom_page and custom_page.allow_comment) %}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-8">
        <h3 class="text-xl font-bold mb-6 text-gray-900 dark:text-white">评论</h3>

        {% if current_user.is_authenticated or comment_config.allow_guest %}
            <!-- 评论表单 -->
            <form action="{{ url_for('blog.add_comment', article_id=article.id) if article else url_for('blog.add_custom_page_comment', page_id=custom_page.id) }}" 
                  method="post" class="mb-8 space-y-6">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" name="parent_id" id="parentCommentId">
                <input type="hidden" name="reply_to_id" id="replyToCommentId">

                <!-- 游客信息表单 -->
                {% if not current_user.is_authenticated and comment_config.allow_guest %}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                昵称 <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="guest_name" required
                                   class="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg
                                  focus:outline-none focus:ring-2 focus:ring-blue-500
                                  bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                        </div>

                        {% if comment_config.require_email %}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    邮箱 <span class="text-red-500">*</span>
                                </label>
                                <input type="email" name="guest_email" required
                                       class="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg
                                  focus:outline-none focus:ring-2 focus:ring-blue-500
                                  bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                            </div>
                        {% endif %}

                        {% if comment_config.require_contact %}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    联系方式 <span class="text-red-500">*</span>
                                </label>
                                <input type="text" name="guest_contact" required
                                       class="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg
                                  focus:outline-none focus:ring-2 focus:ring-blue-500
                                  bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                            </div>
                        {% endif %}
                    </div>
                {% endif %}

                <!-- 评论内容 -->
                <div>
                    <div id="replyingTo" class="mb-2 text-sm text-gray-500 dark:text-gray-400 hidden">
                        回复: <span id="replyingToName"></span>
                        <button type="button" onclick="cancelReply()"
                                class="ml-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-500">
                            取消回复
                        </button>
                    </div>
                    <textarea name="content" required rows="4"
                              class="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg
                                 focus:outline-none focus:ring-2 focus:ring-blue-500
                                 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
                              placeholder="写下你的评论..."></textarea>
                </div>

                {% if comment_config.require_audit %}
                    <p class="text-sm text-gray-500 dark:text-gray-400">评论将在审核后显示</p>
                {% endif %}

                <div class="flex justify-end">
                    <button type="submit"
                            class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
                        发表评论
                    </button>
                </div>
            </form>
        {% else %}
            <div class="mb-8 text-center text-gray-500 dark:text-gray-400">
                <a href="{{ url_for('auth.login') }}" class="text-blue-600 dark:text-blue-400 hover:underline">登录</a>
                后参与评论
            </div>
        {% endif %}

        <!-- 评论列表 -->
        <div class="space-y-6">
            {% if comment_data and comment_data.items %}
                {% for comment in comment_data.items %}
                    <div class="border-t border-gray-100 dark:border-gray-700 py-6 first:border-t-0" id="comment-{{ comment.id }}">
                        <!-- 父评论内容 -->
                        <div class="flex items-start space-x-3">
                            <!--<img src="{{ comment.user.avatar if comment.user else '/static/image/default_avatar.png' }}"
                                 alt="avatar" class="w-8 h-8 rounded-full">-->
                            <img src="{{ get_gravatar(comment.guest_email if comment.guest_email else (comment.user.email if comment.user else None)) }}"
                                 alt="avatar" class="w-8 h-8 rounded-full">
                            <div class="flex-1">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-2">
                                        {% if comment.user %}
                                            <a href="{{ url_for('user.author', id=comment.user.id) }}"
                                               class="font-medium text-gray-900 dark:text-white hover:text-blue-600">
                                                {{ comment.user.nickname or comment.user.username }}
                                            </a>
                                        {% else %}
                                            <span class="font-medium text-gray-500">{{ comment.guest_name or '游客' }}</span>
                                        {% endif %}
                                        <span class="text-xs text-gray-400">{{ comment.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
                                    </div>
                                    <div class="flex items-center space-x-4">
                                        <button onclick="replyTo({{ comment.id }}, '{{ comment.display_name }}')"
                                                class="text-sm text-blue-600 hover:text-blue-700">
                                            回复
                                        </button>
                                        {% if current_user.is_authenticated and (current_user.id == comment.user_id or current_user.role == 'admin') %}
                                            <button onclick="deleteComment({{ comment.id }})"
                                                    class="text-sm text-red-600 hover:text-red-700">
                                                删除
                                            </button>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="mt-2 text-gray-800 dark:text-gray-200">{{ comment.content }}</div>
                            </div>
                        </div>

                        <!-- 回复列表 -->
                        {% if comment.replies %}
                            <div class="mt-4 ml-11 space-y-4">
                                {% for reply in comment.replies %}
                                    <div class="flex items-start space-x-3" id="comment-{{ reply.id }}">
                                        <img alt="{{ reply.display_name }}" src="{{ get_gravatar(reply.guest_email if reply.guest_email else (reply.user.email if reply.user else None)) }}"
                                             alt="avatar" class="w-6 h-6 rounded-full">
                                        <div class="flex-1">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center space-x-2">
                                                    {% if reply.user %}
                                                        <a href="{{ url_for('user.author', id=reply.user.id) }}"
                                                           class="font-medium text-gray-900 dark:text-white hover:text-blue-600">
                                                            {{ reply.user.nickname or reply.user.username }}
                                                        </a>
                                                    {% else %}
                                                        <span class="font-medium text-gray-500">{{ reply.guest_name or '游客' }}</span>
                                                    {% endif %}
                                                    
                                                    {% if reply.reply_to_id %}
                                                        <span class="font-medium text-gray-500">回复了 {{ 
                                                            reply.reply_to.user.nickname if reply.reply_to.user else 
                                                            (reply.reply_to.guest_name or '游客') 
                                                        }}</span>
                                                    {% endif %}
                                                    
                                                    <span class="text-xs text-gray-400">{{ reply.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
                                                </div>
                                                <div class="flex items-center space-x-4">
                                                    <button onclick="replyTo({{ comment.id }}, '{{ reply.display_name }}', {{ reply.id }})"
                                                            class="text-sm text-blue-600 hover:text-blue-700">
                                                        回复
                                                    </button>
                                                    {% if current_user.is_authenticated and (current_user.id == reply.user_id or current_user.role == 'admin') %}
                                                        <button onclick="deleteComment({{ reply.id }})"
                                                                class="text-sm text-red-600 hover:text-red-700">
                                                            删除
                                                        </button>
                                                    {% endif %}
                                                </div>
                                            </div>
                                            <div class="mt-2 text-gray-800 dark:text-gray-200">{{ reply.content }}</div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                {% endfor %}
            {% else %}
                <div class="text-center py-8 text-gray-500">暂无评论</div>
            {% endif %}
        </div>

        <!-- 分页 -->
        {% if comment_data and comment_data.pages > 1 %}
            <div class="mt-6">
                {% if custom_page %}
                    <!-- 自定义页面分页 -->
                    {% with pagination=comment_data, 
                            endpoint=custom_page.route.lstrip('/'),
                            kwargs={} %}
                        {% include 'components/pagination.html' %}
                    {% endwith %}
                {% else %}
                    <!-- 文章分页 -->
                    {% with pagination=comment_data, 
                            endpoint='blog.article',
                            kwargs={
                                'path': ArticleUrlGenerator.generate(article.id, article.category_id, article.created_at).lstrip('/')
                            } %}
                        {% include 'components/pagination.html' %}
                    {% endwith %}
                {% endif %}
            </div>
        {% endif %}
    </div>
{% else %}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-8">
        <div class="text-center py-8 text-gray-500 dark:text-gray-400">
            评论功能已关闭
        </div>
    </div>
{% endif %}